<template>
    <div class="Preson">
        <h2>一辆{{ car.brand }},价值{{ car.price }}万</h2>
        <button @click="changPrice">修改汽车价格</button>
        <button @click="changBrand">修改汽车品牌</button>
        <button @click="changCar">修改汽车</button>
    <br>
    <h2>游戏列表</h2>
    <ul>
        <li v-for="gra in graem" :key="gra.id">{{ gra.name }}</li>
    </ul>
    <button @click="changfirst">修改第一个游戏的名字</button>
    </div>
</template>

<script lang="ts" setup>
//reactive只能定义对象类型的响应式数据
import { reactive } from 'vue'
//数据
let car = reactive({ brand: '奔驰', price: 100 })
// 方法
function changPrice() {
    car.price += 10
}
function changBrand() {
    car.brand = '奥迪'
}
function changCar() {
    Object.assign(car,{brand:'红旗',price:50})
}

let graem =reactive([
    { id: '01', name: '王者' },
    { id: '02', name: 'csgo' },
    { id: '03', name: '永结无间' },
]) 

function changfirst() {
    graem[0].name = '吃鸡'
}
</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}
</style>